@import('reset.styl')
global-reset()

.l
    float:left
.r
    float:right
        
.header
    height: 41px
    background: #236be6 url(head_bg.png) repeat-x 0 0
    box-shadow: 0px 0px 3px 1px #000
    position: relative
    z-index: 999
    min-width: 650px
    .logo
        display: inline-block
        background: no-repeat center 6px
        height: 41px
        width: 33px
        float: left
        margin: 0 5px 0 0
    .exit,.logo
        background-image: url(logo.png)
    .exit
        display: inline-block
        width: 14px
        height: 12px
        background-position: -4px -39px
    h1
        display: inline-block
        font-size: 22px
        line-height: 41px
        color: #89B5FF
        padding: 0 0 0 10px
    .l a 
        color:#89b5ff
    .r
        padding: 0 5px 0 0
        a
            color: #fff
            font-size: 12px
            padding: 0 5px 0 5px
            margin:2px 2px 0 2px
            transition: background 500ms ease-in
            -webkit-transition: background 500ms ease-in
            -moz-transition: background 100ms ease-in
            display: inline-block
            line-height: 22px
            height: 20px
            overflow: hidden
            border-radius: 3px
            &:hover
                background: #fff600
                color: #282828
        li
            display: inline-block
            float: left
            background: rgba(0,0,0,0.28)
            height: 24px
            line-height: 19px
            margin: 9px 3px 0 0
            border-radius: 3px
        span.arrow
            margin: 6px 1px 0 3px
        ul ul
            position: absolute
            background: rgba(0,0,0,0.5)
            display: none
            margin: 0 20px 0 0
            border-radius: 3px
            overflow: hidden
            li 
                margin: 0 0 0 0
                width: 100%
                height: 35px
                a
                    line-height: 34px
                    height: 34px
                    display: block
        ul li:hover
            ul
                display: block
            .arrow
                -webkit-animation: rotateIn .2s .2s ease both
                -moz-animation: rotateIn .2s .2s ease both
                


.content
    width: 100%
    height: 100%
    overflow: hidden

.menu,.iframe
    height: 100%
.menu
    width: 200px
    position: relative
    background: #EEEEEE
    overflow-y: auto

.iframe
    margin: 0 0 0 200px;
    iframe
        height: 100%
        width: 100%
        border: 0

.menu 
    nav
        height: 100%
        display: block
    ul 
        padding: 0 0 10px 0
        li
            margin: 0 10px 0 10px
            line-height: 28px
            padding: 10px 0 0 0
            font-size: 12px
            border-radius: 3px
            a 
                color: #fff
                line-height: 28px
                display: block
                transition: background 300ms ease-in
                -webkit-transition: background 300ms ease-in
                -moz-transition: background 300ms ease-in
                background: #5a83cb
                border-radius: 3px
                padding: 0 0 0 5px
                &:hover
                    background: #2e4a80
        li.ok
            a 
                background: #ee8c00
        ul 
            background: #2c54a0
            border-radius: 0 0 6px 6px
            display: none
            margin: 0 2px
            padding:0
            overflow: hidden;
            li 
                margin: 0 0 0 0
                background: transparent
                padding: 0 
                a 
                    background: transparent
                    margin: 0 0 0 0
                    border-radius:0

.arrow
    display: inline-block
    float: right
    margin: 10px 10px 0 0
    width: 0
    height: 0
    border-top: 5px solid transparent
    border-right: 5px solid #fff
    border-bottom: 5px solid transparent

.unarrow
    -webkit-animation: rotateIn .2s .2s ease both
    -moz-animation: rotateIn .2s .2s ease both

@keyframes rotateIn
    0%
        -webkit-transform-origin: center center
        -webkit-transform: rotate(0)
    100%
        -webkit-transform-origin: center center
        -webkit-transform: rotate(-90deg)
@keyframes rotateIn
    0%
        -moz-transform-origin: center center
        -moz-transform: rotate(0)
    100%
        -moz-transform-origin: center center
        -moz-transform: rotate(-90deg)
.loading
    height: 32px
    min-width: 30px
    position: absolute
    z-index: 888
    background: #fff url(../img/loading.gif) no-repeat
    padding: 0 10px 0 40px
    line-height: 32px
    font-size: 12px
    border-radius: 5px
    margin: 10px 0 0 10px

/* ------------- Retina ------------- */
@media only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-resolution: 240dpi),
only screen and (min-resolution: 2dppx)
    .header
        background-image: url(head_bg@2x.png)
        background-size: 9px 41px
        .logo,.exit
            background-image: url(logo@2x.png)
            background-size: 24px 52px

